<template>
  <div class="all-boxYH">
    <!-- <p style="color: #fff;">2019年累计巡查400km</p> -->
    <div class="boxerick1">
      <div class="tag-box">
        <div class="tag-box-title">已修复</div>
        <div class="box-num">
          <div class="box-num-left">1023个</div>
          <div class="box-num-right">123万</div>
        </div>
        <div class="box-date">
          <div class="box-date-left">本月更新</div>
          <div class="box-date-right">105</div>
        </div>
      </div>
      <div class="tag-box">
        <div class="tag-box-title">正在施工</div>
        <div class="box-num">
          <div class="box-num-left">1023个</div>
          <div class="box-num-right">123万</div>
        </div>
        <div class="box-date">
          <div class="box-date-left">本月更新</div>
          <div class="box-date-right">105</div>
        </div>
      </div>
      <div class="tag-box">
        <div class="tag-box-title">已验收项目</div>
        <div class="box-num">
          <div class="box-num-left">1023个</div>
          <div class="box-num-right">123万</div>
        </div>
        <div class="box-date">
          <div class="box-date-left">本月更新</div>
          <div class="box-date-right">105</div>
        </div>
      </div>
    </div>
    <div class="boxerick2">
      <div class="boxerick2-t" >护养工程项目清单</div>
      <p class="boxerick2-p">G6、搞9、国道110线水段病害专项处治工程 <span>【工期：2019.7.6-2.19.7.9】</span></p>
      <p class="boxerick2-p">G6、搞9、国道110线水段病害专项处治工程 <span>【工期：2019.7.6-2.19.7.9】</span></p>
      <p class="boxerick2-p">G6、搞9、国道110线水段病害专项处治工程 <span>【工期：2019.7.6-2.19.7.9】</span></p>
      <p class="boxerick2-p">G6、搞9、国道110线水段病害专项处治工程 <span>【工期：2019.7.6-2.19.7.9】</span></p>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import echarts2 from "@/components/echarts.vue";
import TechnicalState from "./TechnicalState"

import technicalState22 from '../../../jsonData/technicalState'

export default {
  name: "projectrick",
  props: {
    chartDataOne1: {
      type: Array,
      default: () => {
        return [];
      }
    },

    nameList: {
      type: Array,
      default: () => {
        // return ["桥梁工程", "隧道工程", "路基工程", "临建工程"];
        return [];
      }
    },
    pieNameList: {
      type: Array,
      default: () => {
        // return ["I 级风险", "II 级风险", "III 级风险", "IV 级风险"];
        return [];
      }
    },
    pieData:  {
      type: Array,
      default: () => {
        // return ["I 级风险", "II 级风险", "III 级风险", "IV 级风险"];
        return [];
      }
    }
  },
  data() {
    var colors = ["#7cf317", "#d10eb1", "#4ddbff"];
    return {
      technicalState: {},

      dateList: ["今日", "本周", "本月"],
      isActive: 0,
      styles1: {
        width: "100%",
        height: "100%",
        margin: "0 auto"
      },
      option6: {
        barWidth: 12,
        // barGap:'80%',
        // legend: {
        //   textStyle: {
        //     color: "#fff"
        //   },
        //   icon: "roundRect", //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
        //   itemWidth: 12, // 设置宽度
        //   itemHeight: 6, // 设置高度
        //   itemGap: 10, // 设置间距
        //   // top: 2,
        //   bottom: 0,
        //   left: 50,
        //   // data: ["MQI"]
        // },
        title: {
          text: '**年**月平均交通量',
          top: 0,
          left: 'center',
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        xAxis: {
          type: "category",
          data: this.nameList,
          // data: ["桥梁工程", "隧道工程", "路基工程", "临建工程"],
          // 去掉y轴坐标线
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // 设置字体
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 10
            }
          }
        },

        series: [
          {
            name: "MQI",
            type: "bar",
            // data: [600, 900, 1100, 700],
            data: this.chartDataOne1,
            itemStyle: {
              normal: {
                barBorderRadius: [3, 3, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#44F0FF"
                  },
                  {
                    offset: 1,
                    color: "#3486DA"
                  }
                ])
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            // max : 1200,
            // min: 400,
            splitNumber: 4,
            // 去掉刻度
            axisTick: {
              show: false
            },
            bottom: 10,
            // show : false,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#0d1b4b"],
                width: 1,
                type: "solid"
              }
            },
            // 设置字体
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 12
              }
            }
          }
        ],
        // 设置图标的位置
        grid: {
          x: 10,
          x2: 10,
          y:20,
          y2: 30,
          containLabel: true
        }
      },
      option5: {
        barWidth: 10,
        // barGap:'80%',
        // title: {
        //   text: "风险",
        //   color: "#fff",
        //   left: "66%",
        //   top: "45%",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 12
        //   }
        // },
        title: {
          text: '分公司MQI优良路况情况',
          top: 10,
          left: 'center',
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        tooltip: {
          // trigger: 'item',
          formatter: " {b}<br/>{c}<br/> ({d}%)"
        },
        legend: {
          // orient: "vertical",
          // x: 10,
          // y: "center",
          left: 'center',
          bottom: 2,
          left: 'center',
          icon: "roundRect", //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 5, // 设置宽度
          itemHeight: 5, // 设置高度
          itemGap: 10, // 设置间距
          data: this.pieNameList,
          // data: ["I 级风险", "II 级风险", "III 级风险", "IV 级风险"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            // radius: "65%",
            center: ["50%", "50%"],
            borderWidth: 10,
            avoidLabelOverlap: false,
            data: this.pieData,
            /* [
              { value: 335, name: "I 级风险", itemStyle: { color: "#D32F30" } },
              {
                value: 200,
                name: "II 级风险",
                itemStyle: { color: "#F28C1D" }
              },
              {
                value: 145,
                name: "III 级风险",
                itemStyle: { color: "#FFF45C" }
              },
              { value: 120, name: "IV 级风险", itemStyle: { color: "#0041FB" } }
            ],
            */
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            }
          }
        ]
      },
    }
  },
  components: {
    echarts2,
    TechnicalState
  },
  mounted() {
    this.technicalState = technicalState22
  },
  methods: {
    tabClick(index) {
      this.isActive = index;
    }
  }
};
</script>
<style lang="scss" scoped>
.all-boxYH {
  display: flex;
  flex-direction: column;
  .boxerick1 {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    .tag-box{
      // flex: 1;
      width: 28%;
      height: 100%;
      border: 0.05px solid #fff;
      // background: pink;
      color: #fff;
      display: flex;
      padding: 2px;
      // border-radius: 1px;
      box-sizing: border-box;
      flex-direction: column;
      justify-content: space-between;
      .tag-box-title{
        font-size: 7px;
        color: #fff;
      }
      .box-num{
        display: flex;
        // justify-content: space-between;
        .box-num-left{
          color: #fff;
          font-size: 5px;
          margin-right: 20px;
        }
        .box-num-right{
          color: red;
          font-size: 5px;
        }
      }
      .box-date{
        display: flex;
        // justify-content: space-between;
        .box-date-left{
          color: #fff;
          margin-right: 30px;
          font-size: 6px;
        }
        .box-date-right{
          font-size: 4px;
          color: #fff;
        }
      }
    }
  }
  .boxerick2 {
    // background: pink;
    width: 100%;
    height: 70%;
    padding: 0 10px;
    box-sizing: border-box;
    color: #fff;
    .boxerick2-t{
      margin: 3px 0;
      font-size: 7px;
    }
    .boxerick2-p{
      font-size: 6px;
    }
  }
  width: 100%;
  height: calc(100% - 24px);
}
</style>
